<html>

<head>
    <meta charset="utf-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.2/css/mdui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.2/js/mdui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div calss="mdui-container">
        <button id="take_on" class="mdui-btn mdui-color-theme-accent mdui-ripple">开始回收</button>
        <button id="take_off" class="mdui-btn mdui-color-theme-accent mdui-ripple">结束回收</button>
    </div>
    <script>
        function reflush() {
            $.get("/api/take/on", function(data, status) {
                var html = "";
                for (i in data) {
                    d = data[i];
                    html += '\
                    <div class="mdui-card mdui-col-xs-3">\
                        <div class="mdui-card-media">\
                            <img src="' + d.path + '"/>\
                        </div>\
                        <div class="mdui-card-primary">\
                            <div class="mdui-card-primary-subtitle">' + d.cellphone + '<br>重量：' + d.weight + '<br>' + d.date + '</div>\
                        </div>\
                    </div>';
                }
                $("#images").html(html);
            });
        }
        $(document).ready(function() {
            var t = setInterval("reflush()", 1000);
        });
    </script>
</body>

</html>